<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/home/index.css">
    <link rel="stylesheet" href="./css/cart/index.css">
    <script src="./js/vue.js"></script>
    <script src="./js/jquery.js"></script>
</head>

<body>
    <div id="app">
        <!-- 广告 -->
        <div class="header_img">
            <img src="./img/goods/header.png" alt="">
        </div>
        <!-- 导航1 -->
        <div class="header_nav">
            <div class="nav_box">
                <ul class="left_list">
                    <li><a href="#">华硕官网</a></li>
                    <li><a href="./index">商城首页</a></li>
                    <li><a href="#">企业采购</a></li>
                    <li><a href="#">驱动下载</a></li>
                    <li><a href="#">装机必备</a></li>
                    <li><a href="#">已旧换新</a></li>
                </ul>
                <ul class="right_list">
                    <li v-if="!login"><a href="/login">登录</a></li>
                    <li v-if="!login"><a href="/reg">注册</a></li>
                    <li v-if="login"><a href="#">{{user.username}}</a></li>
                    <li v-if="login"><a href="#" @click.prevent="exit()">退出</a></li>
                    <li><a href="#">消息</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#" style="border-right: none;">手机版</a></li>
                    <li class="cart">
                        <div class="title"><a href="./cart">购物车({{cart_num}})</a></div>
                        <div class="cart_list">
                            <p v-show="!login">您还没有登录！登录后进入购物车</p>
                            <p v-show="login">开发中,点击查看购物车</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 导航2 -->
        <div class="header_nav2">
            <div class="content">
                <div class="logo">
                    <img src="./img/goods/logo.png" alt="">
                    <img src="./img/goods/logo2.png" alt="">
                </div>

                <ul class="inlink">
                    <li><img src="./img/goods/UI/mini1.png" alt=""><span>华硕电脑官网</span></li>
                    <li><img src="./img/goods/UI/mini2.png" alt=""><span>ROG专区</span></li>
                    <li><img src="./img/goods/UI/mini3.png" alt=""><span>多彩a豆</span></li>
                    <li><img src="./img/goods/UI/mini4.png" alt=""><span>华硕好屏</span></li>
                </ul>

                <div class="search">
                    <input type="text" name="search" id="" v-model="search" placeholder="新人礼">
                    <span></span>
                </div>
            </div>
        </div>
        <!-- 回到头部 -->
        <div class="gg" id="gg">
            <ul class="rightBox">
                <li class="icon1">
                    <div></div>
                    <p>个人中心</p>
                </li>
                <li class="icon2">
                    <div></div>
                    <p>热线</p>
                </li>
                <li class="icon3">
                    <div></div>
                    <p>优惠券</p>
                </li>
                <li class="icon4">
                    <div></div>
                    <p>客服</p>
                </li>
                <li class="icon5">
                    <div></div>
                    <p>APP</p>
                </li>
                <li class="icon6">
                    <div></div>
                    <p>注册好礼</p>
                </li>
                <li class="icon7" @click="toGo(0)">
                    <div></div>
                    <p>返回顶部</p>
                </li>
            </ul>
        </div>

        <div class="mian">
            <div class="mianbox">
                <div class="noLogin" v-if="!login">
                    <span>您还没有登录！登录后购物车的商品将保存到您账户中</span>
                    <a href="/login">立即登录</a>
                </div>

                <div class="cart_content" id="cart" v-if="login">
                    <div class="cart_header">
                        <ul>
                            <li class="input">
                                <input type="checkbox" name="checkAll" id="checkAll" v-model="checkAll"
                                    @click.prev="cliAll()">
                                <label for="checkAll">全选</label>
                            </li>
                            <li class="goods">商品</li>
                            <li class="price">销售价</li>
                            <li class="num">数量</li>
                            <li class="td">优惠金额</li>
                            <li class="td">积分</li>
                            <li class="td">小计</li>
                            <li class="del">操作</li>
                        </ul>
                    </div>
                    <!-- 购物车内容 -->
                    <div class="cart_list">
                        <div class="item" v-for="(item,index) in cartList" :key="item.cid">
                            <div class="item_warp">
                                <ul>
                                    <li class="input"><input type="checkbox" v-model="item.state">
                                    </li>
                                    <li class="goods">
                                        <div class="pic"><img :src="item.url" alt=""></div>
                                        <p class="name">{{item.name}}</p>
                                    </li>
                                    <li class="price">{{item.price|RMB}}</li>
                                    <li class="num">
                                        <div class="num_warp">
                                            <button @click="jianNum(index)">-</button>
                                            <input type="text" v-model="item.number" @blur="updata(index)">
                                            <button @click="jiaNum(index)">+</button>
                                        </div>

                                    </li>
                                    <li class="td">{{item.discount}}</li>
                                    <li class="td">{{item.points}}</li>
                                    <li class="td">{{item.number*item.price}}</li>
                                    <li class="del"><a href="#" @click.prev="del(index)">X</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="order_discount" v-show="cartList.length!=0">
                        <h3><span>-</span>订单优惠</h3>
                        <p><b>[包邮]</b>订单总金额满10元包邮</p>
                    </div>

                    <h2 v-show="cartList.length==0">你还没有添加商品,快去<a href="/index">商城</a>选购吧</h2>

                    <div class="stats">
                        <a href="/index">继续购物</a>
                        <p>共<span class="allNum">{{cartList.length}}</span>件商品，已选择<span>{{isItem}}</span>件</p>
                        <button @click="showOver()">去结算</button>
                        <div class="total_price">
                            <span>合计</span>
                            <b>{{sum|RMB}}</b>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="footer">
            <img src="./img/goods/footer.png" alt="">
        </div>
    </div>
</body>

</html>
<script src="./js/axios.js"></script>
<script src="./js/lodash.js"></script>
<script src="./js/layer/layer.js"></script>
<script>
    axios.interceptors.request.use(
        config => {
            config.headers.token = localStorage.getItem('token')
            return config
        },
        error => {
            return Promise.reject(error)
        }
    )

    const vm = new Vue({
        el: "#app",
        data: {
            login: false,
            number: 1,
            user: null,
            search: '',
            cart_num: 0,
            checkAll: 1,
            cartList: [],
        },
        methods: {
            toGo(y) {
                $('body,html').animate({ scrollTop: y }, 500);
            },
            isLogin() {
                let token = localStorage.getItem('token');
                if (token != null) {
                    axios({
                        url: '/users/is',
                        method: 'get',
                        headers: {
                            token: token
                        }
                    }).then(res => {
                        if (res.data.code == 200) {
                            this.login = true;
                            this.user = res.data.user;
                            axios({
                                url: './cart/all',
                                method: 'get',
                                params: {
                                    uid: this.user.id
                                }
                            }).then(res => {
                                this.cartList = res.data.list || [];
                                this.cart_num = this.cartList.length;
                            })
                        } else {
                            console.log("token 已经过期");
                        }
                    })
                } else {
                    console.log('没有token');
                }
            },
            jiaNum(index) {
                this.cartList[index].number++;
                this.updata(index);
            },
            jianNum(index) {
                if (this.cartList[index].number - 1 >= 1) {
                    this.cartList[index].number--;
                    this.updata(index);
                }

            },
            cliAll() {
                this.checkAll = this.checkAll ? 0 : 1;
                this.cartList.forEach(item => {
                    item.state = this.checkAll;
                })
            },
            del(index) {
                axios({
                    url: '/cart/del',
                    method: 'get',
                    params: {
                        cid: this.cartList[index].cid
                    }
                }).then(res => {
                    layer.msg(res.data.msg)
                })
                this.cartList.splice(index, 1)
            },
            showOver() {
                layer.alert("开发中,开发完成后就能使用")
            },
            updata(index) {
                axios({
                    url: '/cart/updata',
                    method: 'get',
                    params: {
                        cid: this.cartList[index].cid,
                        number: this.cartList[index].number,
                    }
                }).then(res => {
                    console.log(res.data.msg)
                })
            },
            exit() {
                localStorage.removeItem('token');
                location.reload();
            }
        },
        created() {
            this.isLogin();
        },
        filters: {
            RMB(val) {
                return '￥' + val;
            }
        },
        computed: {
            sum() {
                return this.cartList.reduce((pre, cur) => {
                    if (cur.state == 1)
                        return pre += cur.number * cur.price;
                    else
                        return pre;
                }, 0)
            },
            isItem() {
                return this.cartList.filter(item => item.state == 1).length
            }
        },
        watch: {
            cartList: {
                deep: true,
                handler: function () {
                    let n = this.cartList.filter(item => item.state == 1).length;
                    if (n == this.cartList.length) {
                        this.checkAll = 1
                    } else {
                        this.checkAll = 0
                    }
                }
            }
        },
    })
</script>